<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <TextHighlight/>
            </n-icon>
            <Handle id="chineseParticiple-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="chineseParticiple-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>中文分词</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
            <n-card title="中文分词">
                <p>
                    <span>单词长度≥</span>
                    <n-input-number placeholder="" v-model:value="number"/>
                    <span>
                        <n-checkbox v-model:checked="deduplication">
                            查重
                        </n-checkbox>
                    </span>
                </p>
                <div class="results">
                    分词结果:
                    <div>
                        <n-scrollbar style="max-height: 200px" trigger="none">
                        <span v-for="(index,item) in props.data.data" v-show="item<400">
                            <span @click="" class="pointer">{{ index }}</span>&nbsp; ,
                        </span>
                        </n-scrollbar>
                    </div>
                </div>
                <div>

                    <n-input placeholder="输入自定义词" v-model:value="word" @keyup.enter="addDict" style="width: 60%;"/>
                    <n-button @click="addDict">添加自定义词</n-button>
                    <br>
                    自定义词典:

                    <div>
                        <n-scrollbar style="max-height: 200px" trigger="none">
                        <span v-for="(index,item) in dict" v-show="item<400">
                            <span @click="deleteDict(item)" class="pointer" style="background-color: #DBFFEA">{{ index }}</span>&nbsp;
                        </span>
                        </n-scrollbar>
                    </div>
                </div>
                <template #footer>
                    <n-space>
                        <n-button @click="getSuperiorData">获取上级节点数据</n-button>
                        <n-button @click="implementation">分词</n-button>
                    </n-space>
                </template>
            </n-card>
        </flow-popup-window>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {TextHighlight} from "@vicons/carbon";
import {useElementsStore} from "@/stores/elements";
import workApi from "@/http/workApi";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";

const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()

// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    wait: false,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        if (!popup.wait) {
            popup.show = false;
        }
    },
    reopen: () => {
        popup.show = true
    }
})
const deduplication = ref(true)
const number = ref(0)
const dict = ref([])
const word = ref('')

function addDict() {
    if (word.value === "") {
        window.$message.info("自定义词需要填写内容")
        return
    }
    dict.value.push(word.value);
    word.value = ""
}

function deleteDict(item) {
    dict.value.splice(item,1)
}

const implementation = () => {
    workApi.post("perform_tasks/word_segmentation", {
        number: number.value,
        dict: dict.value,
        deduplication: deduplication.value,
        data: props.data.text
    }).then(r => {
        console.log(r)
        props.data.data = r.data
    })
}

function delWord(number) {
    props.data.data.splice(number, 1)
}

const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.text = j.data.text
                    return
                }
            }
        }
    }
}

</script>

<style scoped lang="less">
p {
    display: flex;

    span {
        display: flex;
        align-items: center
    }

    .n-input-number {
        width: 100px;
    }
}

.results {
    > div {
        width: 500px;
        height: 200px;
        padding: 10px;
        border: solid 1px rgba(0, 0, 0, 0.20);
    }
}
</style>